import {Component, OnInit} from '@angular/core';
import {Hero} from '../hero';
import {HeroService} from '../services/hero.service';
import {interval} from 'rxjs';
import {promise} from 'selenium-webdriver';
import {map,take} from 'rxjs/operators';


@Component({
  selector: 'app-heros',
  templateUrl: './heros.component.html',
  styleUrls: ['./heros.component.css']
})
export class HerosComponent implements OnInit {


  heros: Hero[];

  selectHero: Hero;
  birth: Date = new Date(2018, 7, 1);


  constructor(
    private heroService: HeroService
  ) {
  }

  ngOnInit() {
    interval(400).pipe(
      map(i => console.log(i)),
      take(200)
    );
    this.getHeros();
  }


  onSelect(hero: Hero): void {
    console.log(hero['name']);
    this.selectHero = hero;
  }

  getHeros(): void {
    this.heroService.getHeros()
      .subscribe(heros => this.heros = heros);
  }


  add(name: string): void {
    name = name.trim();
    if (!name) {
      return;
    }
    this.heroService.addHero({name} as Hero).subscribe(
      hero => this.heros.push(hero)
    );
  }

  delete(hero: Hero): void {
    this.heros.filter(h => h !== hero);
    this.heroService.delete(hero).subscribe();
  }

}
